<template>
  <div class="center_box flex5 flexC">
    <div class="flex" style="position: absolute; bottom: 3%; font-weight: 400;">
      <div class="flex " style="margin-left:3rem;">
        <div style="padding-right: 1rem;"><img src="@/assets/img/home/datasea/book.png" alt="" style="width: 2.9375rem; height: 3.5625rem;" /></div>
        <div class="flexC">
          <p class="colorF font_s16">医生工单数</p>
          <p class="font_s24" style="color: #33ebfe;">{{ ljgd }}&nbsp;单</p>
        </div>
      </div>
      <div class="flex" style="margin-left:3rem;">
        <div style="padding-right: 1rem;"><img src="@/assets/img/home/datasea/man1.png" alt="" style="width: 2.875rem; height: 3.3125rem;" /></div>
        <div class="flexC">
          <p class="colorF font_s16">医生总数</p>
          <p class="font_s24" style="color: #fb9ed8;">{{ Qyys }}&nbsp;人</p>
        </div>
      </div>
    </div>
    <p class="font_s22 colorF" style="position: absolute;top: 10%;right: 15%;writing-mode: vertical-lr;opacity: 0.75;  font-weight: 400;">老人数量</p>
    <div class="cursor">
      <MapYongJia v-if="this.cityType == 1"></MapYongJia>
      <MapYueQing v-else-if="this.cityType == 2"></MapYueQing>
      <MapLuCheng v-else-if="this.cityType == 3"></MapLuCheng>
      <MapOuHai v-else-if="this.cityType == 4"></MapOuHai>
      <MapLongWan v-else-if="this.cityType == 5"></MapLongWan>
      <MapDongTou v-else-if="this.cityType == 6"></MapDongTou>
      <MapWenCheng v-else-if="this.cityType == 7"></MapWenCheng>
      <MapRuiAn v-else-if="this.cityType == 8"></MapRuiAn>
      <MapPingYang v-else-if="this.cityType == 9"></MapPingYang>
      <MapTaiShun v-else-if="this.cityType == 10"></MapTaiShun>
      <MapCangNan v-else-if="this.cityType == 11"></MapCangNan>
    </div>
  </div>
</template>

<script>
import MapYongJia from './../cityComponents/MapYongJia'
import MapYueQing from './../cityComponents/MapYueQing'
import MapLuCheng from './../cityComponents/MapLuCheng'
import MapOuHai from './../cityComponents/MapOuHai'
import MapLongWan from './../cityComponents/MapLongWan'
import MapDongTou from './../cityComponents/MapDongTou'
import MapWenCheng from './../cityComponents/MapWenCheng'
import MapRuiAn from './../cityComponents/MapRuiAn'
import MapPingYang from './../cityComponents/MapPingYang'
import MapTaiShun from './../cityComponents/MapTaiShun'
import MapCangNan from './../cityComponents/MapCangNan'
export default {
  name: 'AreaMapCen',
  components: { MapYongJia, MapYueQing, MapLuCheng, MapOuHai, MapLongWan, MapDongTou, MapWenCheng, MapRuiAn, MapPingYang, MapTaiShun, MapCangNan },
  props: ['name', 'cityCode', 'cityType'],
  data () {
    return {
      category: false,
      // 医生总共单数
      ljgd: '',
      // 医生总数
      Qyys: '',
      cityUrl: ''
    }
  },
  mounted () {
    console.log('indexe88888888：', this.cityType)
    let cityCodesLocal = localStorage.getItem('cityCode')
    if (this.cityCode == null || this.cityCode === undefined) {
      console.log('cen缓存cityCodesLocal：', cityCodesLocal)
      this.handle(cityCodesLocal)
    } else {
      console.log('cen不是缓存cityCode：', this.cityCode)
      this.handle(this.cityCode)
    }
  },
  methods: {
    childFun (code) {
      this.handle(code)
    },
    handle (code) {
      this.$http.post(this.$api.Ljgd.ljgd, 'qxcode=' + code, true).then(result => {
        this.ljgd = result.data.response.ServiceTotal
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=' + code, true).then(result => {
        this.Qyys = result.data.response.TotalDoctor
      })
    }
  }
}
</script>

<style scoped lang="scss">
.map_icon {
  color: #214494;
  font-style: italic;
  // padding: 0.3rem 0.5rem 4.7rem 0.5rem;
  width: 7rem;
  height: 7rem;
  line-height: 2.4rem;
  text-align: center;
  background: url(../../../assets/img/home/2.png) no-repeat center;
  background-size: 100% 100%;
}
.center_box {
  position: relative;
  overflow: hidden;
}
</style>
